/* 组件在 layout 布局文件中引用，全局通过redux控制 */

import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Button, Modal, Skeleton } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import loadable from '@loadable/component';
import pMinDelay from 'p-min-delay';

import { setStore } from '@/reducers/common';
import useDevice, { DEVICES} from '@/hooks/useDevice';

import styles from './index.module.scss';

const SmsLoginForm = loadable(() => pMinDelay(import('./../SmsLoginForm'), 0), { fallback: <Skeleton paragraph={{rows: 8, width: '100%'}} title={false} active/> });
const QrCodeLoginForm = loadable(() => pMinDelay(import('./../QrCodeLoginForm'), 0), { fallback: <Skeleton active/> });
const WxAuthorizeLoginForm = loadable(() => pMinDelay(import('./../WxAuthorizeLoginForm'), 0), { fallback: <Skeleton active/> });

/*
    登录、注册成功后，（获取个人信息），获取对话配置
*/
export default props => {
    const defaultType = 'qrcode';
    const initState = () => ({
        type: '', //  qrcode, sms, wx
    });
    const [state, setState] = useState(initState);
    const {loginVisible } = useSelector(s => s.common || {});
    const isMobile = DEVICES.MOBILE === useDevice();
    const dispatch = useDispatch();

    // 取消登录
    const onCancelLogin = () => dispatch(setStore({loginVisible: false}));

    // 登录成功
    const onLoginOk = (userInfo={}) => {
        dispatch(setStore({userInfo}));
        onCancelLogin();

        location.reload();
    };

    const changeType = () => {
        const t = isMobile ? 'wx' : 'qrcode';
        setState(o => ({...o, type: 'sms' === o.type ? t : 'sms'}));
    }

    useEffect(() => {
        if(loginVisible) {
            const t = 'sms' !== defaultType ? (isMobile ? 'wx' : 'qrcode') : 'sms';
            setState(o => ({...o, type: t}));
        }
    }, [loginVisible]);

    return (
        <Modal
            open={loginVisible}
            destroyOnHidden={true}
            maskClosable={false}
            closable={false}
            header={null}
            footer={null}
            width={isMobile ? 320 : 360}
            classNames={{
                content: styles['modal-content'],
                body: styles['modal-body']
            }}
        >
            <Button onClick={onCancelLogin} className={styles['close']} type="text" shape="circle" icon={<CloseOutlined/>}></Button>
            <div className={styles['header']}>登录&nbsp;{WEB_NAME}</div>
            <div className={`${styles['change-method']} ${styles[state.type]} ${isMobile ? styles['m'] : ''}`} onClick={changeType}>
                {'sms' === state.type ? (isMobile ? '微信' : '扫码') : '手机'}登录
            </div>
            <div className={styles['form']}>
                {'sms' === state.type ? <SmsLoginForm onOk={onLoginOk} onCancel={onCancelLogin} /> : null}
                {'qrcode' === state.type ? <QrCodeLoginForm onOk={onLoginOk} onCancel={onCancelLogin} /> : null}
                {'wx' === state.type ? <WxAuthorizeLoginForm onOk={onLoginOk} onCancel={onCancelLogin} /> : null}
            </div>
        </Modal>
    )
}

